<template>
  <div class="r">
    <div class="mima">
      <h4>新用户注册</h4>
      <span>很高兴您将成为商城的会员（注册只需一步）</span>
      <p>
        <input @blur="lose" v-model="tel" autofocus="autofocus" type="tel" placeholder="手机号码" />
        <span style="display: none;">必填</span>
        <van-icon name="phone-o" />
      </p>
      <p>
        <input @blur="lost" v-model="pwd" type="password" placeholder="密码" v-if="hid" />
        <input v-model="pwd" type="text" placeholder="密码" v-else />
        <van-icon @click="show" name="closed-eye" v-if="hid" />
        <van-icon @click="show" name="eye-o" v-else />
      </p>
      <p>
        <input
          v-model="sure"
          autofocus="autofocus"
          type="password"
          placeholder="确认密码"
          v-if="conhid"
        />
        <input v-model="sure" type="text" placeholder="确认密码" v-else />
        <van-icon @click="con" name="closed-eye" v-if="conhid" />
        <van-icon @click="con" name="eye-o" v-else />
      </p>
      <p>
        <input v-model="user" autofocus="autofocus" type="text" placeholder="用户名" />
        <van-icon name="user-o" />
      </p>
      <!-- 图片验证码 -->
      <p>
        <input v-model="pic" autofocus="autofocus" type="text" />
        <img :src="imgcode + key" @click="updateImg" class="imgcode" alt />
      </p>
      <p>
        <input v-model="numcode" autofocus="autofocus" type="text" />
        <span @click="getcode">获取验证码</span>
        <span style="display: none;">s后重新获取</span>
        <span @click="getcode" v-if="confirm">获取验证码</span>
        <span v-else>{{ sec }}s后再试</span>
      </p>
      <p>
        <input autofocus="autofocus" type="text" />
        <i class="el-icon-mobile-phone"></i>
      </p>
      <button @click="register">立即注册</button>
      <p class="login">
        <a href @click="login">已有账号？立即登录</a>
      </p>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import qs from "qs";

export default {
  data() {
    return {
      imgcode: "https://api.it120.cc/small4/verification/pic/get?key=",
      key: uuidv4(),
      tel: "", //电话
      pwd: "",//密码
      sure: "",//确认密码
      user: "",//用户
      numcode: "",//短信验证码
      pic: "",//图片验证码
      hid: true,//密码可查看与不可查看
      conhid: true, //确认密码可查看与不可查看
      timer:null, //定时器倒计时
      sec:60,//倒计时的时间限制
      confirm:true, //短信验证码开启
      isActive: false, // input框鼠标失去焦点和获取焦点时的样式状态//默认为正常框
      isFocus: false, //input框鼠标失去焦点和获取焦点时的样式状态//默认为正常框
      isFix: false,  //input框鼠标失去焦点和获取焦点时的样式状态//默认为正常框
      // 地址栏
       value: '',
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州','福州', '厦门', '莆田', '三明', '泉州'],
    };
  },
  methods: {
    //图片验证码
      updateImg() {
      this.key = uuidv4();
    },
    getcode() {
      var data = { mobile: this.tel, picCode: this.pic, key: this.key };
      this.http.post("https://api.it120.cc/small4/verification/sms/get",qs.stringify(data)).then(msg => {
          console.log(msg);
        });
        this.confirm = false;
        this.timer = setInterval(() => {
          if(this.sec >0 && this.sec <=60) {
                this.sec--;
            }else{
                this.confirm = true;
                clearInterval(this.timer);
                this.sec = 60;
                this.timer = null;
            }
        },1000)
    },
    // 注册
    register() {
      var data = { mobile: this.tel, pwd: this.pwd, code: this.numcode };
      this.http
        .post("https://api.it120.cc/small4/user/m/register", qs.stringify(data))
        .then(msg => {
          console.log(msg);
        });
    },
      // 跳转到登录页面
    login() {
      this.$router.push({ path: "/login" });
    },
     // 密码显示隐藏
    show() {
      this.hid = !this.hid;
    },
     // 显示密码隐藏
    con() {
      this.conhid = !this.conhid;
    },
    //手机失去焦点
    lose() {
        if(this.tel == ""){
            this.$notify('请输入正确手机号');
        }
        
      if (this.tel == "") {
        this.$notify("请输入正确手机号");
      }
    },
     // 密码失去焦点
    lost() {
        this.$notify('请输入正确密码');
      if (this.pwd == "") {
        this.$notify("请输入正确密码");
      }
    },
     // 确认密码失去焦点
    def() {
      if (this.sure == "") {
        this.isFix = true;
      }
    },
    // 地址选择
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  }
};
</script>
<style lang="scss" scoped>
.reg {
  width: 5rem;
  border: 1px solid rgb(235, 232, 232);
  margin: 0 auto;
  margin-top: 0.1rem;
  padding-top: 0.2rem;
}
h4 {
  width: 5.2rem;
  text-align: center;
  margin-bottom: 0.2rem;
}
p {
  width: 3.8rem;
  height: 0.5rem;
  margin-top: 0.2rem;
  background: rgb(233, 231, 247);
  margin-left: 0.6rem;
  border-radius: 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0rem 0.3rem 0 0;
}
p input {
  width: 3rem;
  border: cornsilk;
  background: rgba(0, 0, 0, 0);
  text-indent: 0.3rem;
}
input ::placeholder {
  color: #000000;
}
span {
  width: 5.2rem;
  text-align: center;
  display: inline-block;
  font-size: 0.16rem;
  color: #807e7e;
}
button {
  width: 2.91rem;
  height: 0.4rem;
  border-radius: 0.06rem;
  background: linear-gradient(90deg, #5ea6f8, #bb87f6);
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.2rem;
  color: white;
  letter-spacing: 0.06rem;
  margin-left: 1.1rem;
  margin-top: 0.2rem;
  border: #bb87f6;
}
.login {
  background: #ffffff;
  text-align: center;
  text-indent: 0;
}
.login a {
  width: 3.8rem;
  height: 0.5rem;
  color: #5ea6f8;
  text-decoration: underline;
  text-align: center;
}
.imgcode {
  width: 1.4rem;
  height: 0.47rem;
}
.active {
  border: 0.01rem solid rgb(250, 102, 85);
  background: rgb(252, 139, 126, 0.2);
}
.focus {
  border: 0.01rem solid rgb(250, 102, 85);
  background: rgb(252, 139, 126, 0.2);
}
.fix {
  border: 0.01rem solid rgb(97, 250, 148);
  background: rgb(97, 250, 148, 0.2);
}
.tian{
  color: red;
}
</style>